﻿@*
    For more information on enabling MVC for empty projects, visit https://go.microsoft.com/fwlink/?LinkID=397860
*@
@{
    Layout = null;
}
<link href="~/scripts/layui-v2.5.6/layui/css/layui.css" rel="stylesheet" />
<style>
    .form-container {
        padding: 20px;
    }
    .layui-form-item {
        margin-bottom: 15px;
    }
    .search-container {
        margin-bottom: 20px;
        padding: 15px;
        background-color: #f8f9fa;
        border-radius: 4px;
    }
    .button-group {
        text-align: center;
        margin-top: 20px;
    }
    .table-container {
        margin-top: 15px;
        padding: 0 15px;
    }
    /* 选中行样式 */
    .layui-table-click {
        background-color: #5FB878 !important;
        color: #fff !important;
    }
    .layui-table-click td {
        background-color: #5FB878 !important;
        color: #fff !important;
    }
    /* 表格行悬停效果 */
    .layui-table-body tr:hover {
        background-color: #f2f2f2;
        cursor: pointer;
    }
</style>
<body>
    <div class="form-container">
        <!-- 搜索表单 -->
        <div class="search-container">
            <form class="layui-form" id="searchForm" lay-filter="searchForm">
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工单编码:</label>
                            <div class="layui-input-block">
                                <input type="text" name="WorkOrderCode" placeholder="请输入工单编码" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">工单名称:</label>
                            <div class="layui-input-block">
                                <input type="text" name="WorkOrderName" placeholder="请输入工单名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品编号:</label>
                            <div class="layui-input-block">
                                <input type="text" name="ProductCode" placeholder="请输入产品编号" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="layui-row">
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">产品名称:</label>
                            <div class="layui-input-block">
                                <input type="text" name="ProductName" placeholder="请输入产品名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label">客户名称:</label>
                            <div class="layui-input-block">
                                <input type="text" name="CustomerName" placeholder="请输入客户名称" autocomplete="off" class="layui-input">
                            </div>
                        </div>
                    </div>
                    <div class="layui-col-md4">
                        <div class="layui-form-item">
                            <label class="layui-form-label"></label>
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-submit lay-filter="searchBtn">
                                    <i class="layui-icon layui-icon-search"></i>搜索
                                </button>
                                <button type="button" class="layui-btn layui-btn-primary" onclick="resetSearch()">重置</button>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <!-- 工单列表表格 -->
        <div class="table-container">
            <table class="layui-hide" id="workOrderTable" lay-filter="workOrderTable"></table>
        </div>

        <!-- 操作按钮 -->
        <div class="button-group">
            <button type="button" class="layui-btn" onclick="confirmSelection()">确定</button>
            <button type="button" class="layui-btn layui-btn-primary" onclick="closeDialog()">取消</button>
        </div>
    </div>
</body>



<script src="~/scripts/jquery-3.4.1.min.js"></script>
<script src="~/scripts/layui-v2.5.6/layui/layui.js"></script>
<script>
    layui.use(['form', 'table', 'layer'], function(){
        var form = layui.form;
        var table = layui.table;
        var layer = layui.layer;

        // 初始化表格数据
        var workOrderData = [];
        
        // 表格实例
        var tableIns = null;
        
        // 选中的行数据
        var selectedRowData = null;
        
        // 加载工单数据
        function loadWorkOrderData(searchParams) {
            $.ajax({
                url: '/Warehousings/GetProductionWorkOrderMain',
                type: 'GET',
                data: searchParams || {},
                success: function(result) {
                    workOrderData = result || [];
                    // 重新渲染表格
                    tableIns = table.render({
                        elem: '#workOrderTable',
                        data: workOrderData,
                        page: false,
                        cols: [[
                            {field: 'workOrderCode', title: '工单编码', width: '20%', sort: true},
                            {field: 'workOrderName', title: '工单名称', width: '25%'},
                            {field: 'productCode', title: '产品编号', width: '15%'},
                            {field: 'productName', title: '产品名称', width: '25%'},
                            {field: 'customerName', title: '客户名称', width: '15%'}
                        ]],
                        text: {
                            none: '暂无数据'
                        }
                    });
                },
                error: function(xhr, status, error) {
                    layer.msg('数据加载失败：' + error, {icon: 2});
                    // 渲染空表格
                    tableIns = table.render({
                        elem: '#workOrderTable',
                        data: [],
                        page: false,
                        cols: [[
                            {field: 'WorkOrderCode', title: '工单编码', width: '20%', sort: true},
                            {field: 'WorkOrderName', title: '工单名称', width: '25%'},
                            {field: 'ProductCode', title: '产品编号', width: '15%'},
                            {field: 'ProductName', title: '产品名称', width: '25%'},
                            {field: 'CustomerName', title: '客户名称', width: '15%'}
                        ]],
                        text: {
                            none: '暂无数据'
                        }
                    });
                }
            });
        }
        
        // 初始加载数据
        loadWorkOrderData();

        // 搜索功能
        form.on('submit(searchBtn)', function(data){
            var searchParams = data.field;
            // 清空当前选择
            selectedRowData = null;
            // 重新加载数据
            loadWorkOrderData(searchParams);
            return false; // 阻止表单跳转
        });

        // 重置搜索
        window.resetSearch = function() {
            document.getElementById('searchForm').reset();
            form.render(); // 重新渲染表单元素
            // 清空当前选择
            selectedRowData = null;
            // 重新加载数据，清空搜索条件
            loadWorkOrderData();
        };

        // 监听行点击事件
        table.on('row(workOrderTable)', function(obj){
            // 移除所有选中状态
            $('.layui-table-body tr').removeClass('layui-table-click');
            // 添加选中状态
            obj.tr.addClass('layui-table-click');
            // 保存选中的行数据
            selectedRowData = obj.data;
        });
        
        // 确认选择
        window.confirmSelection = function() {
            if(selectedRowData) {
                // 选择工单，回调到父页面
                if(parent && typeof parent.selectWorkOrderCallback === 'function') {
                    parent.selectWorkOrderCallback(selectedRowData);
                }
                
                // 关闭弹窗
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            } else {
                layer.msg('请先选择一条工单记录', {icon: 2});
            }
        };

        // 关闭弹窗
        window.closeDialog = function() {
            var index = parent.layer.getFrameIndex(window.name);
            parent.layer.close(index);
        };
    });
</script>
